<template>
  <div class="popupit" @click.stop>
    <div class="title">扫码下载打开App去领取会员礼</div>
    <div class="popupit-wrap">
        <div><img src="@/assets/android.png" /><span>安卓</span></div>
        <div><img src="@/assets/iosDown.png" /><span>IOS</span></div>
        <i
        class="el-icon-close"
        style="
            cursor: pointer;
            position: absolute;
            top: 12px;
            color: #000;
            font-size: 24px;
            right: 12px;
        "
        @click="close"
        ></i>
        <div class="btn" style="margin: 0 0 40px"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang='less' scoped>

.popupit {
  position: fixed;
  box-sizing: border-box;
  // padding: 1em;
  width: 432px;
  //   height: 216px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.4em;
  background: #fff;
  z-index: 50001;
  color: #333333;
  box-sizing: border-box;
  border: 1px solid #707070;
  
  
  .title {
    // padding: 0 73px;
    margin-top: 42px;
    font-size: 26px;
    color: #000;
    margin-left: 0 !important;
  }

  div {
    // margin-right: 10px !important;
    margin-left: 10px !important;
    overflow: hidden;
    z-index: 99999;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    img {
      width: 150px;
      height: 150px;
    }
    span {
      color: #000;
    }
  }
  .popupit-wrap{
    // white-space: nowrap;
    
    display: flex !important;
    flex-direction: row;
    padding:56px 48px;
    padding-top: 24px;
  }
  .close-repost {
    display: flex;
    justify-content: flex-end;
    span {
      cursor: pointer;
      padding: 10px 20px 0 0;
      color: #333;
      text-align: right;
      font-size: 26px;
      font-weight: 500;
    }
  }
}
</style>